<template>
  <div class="form-input-box form-mb">
    <div class="form-input-box-title">
      {{ title }}
    </div>
    <div class="form-input-box-input">
      <van-field v-model="innerValueModel" :placeholder="placeholder">
        <template v-if="isPhone" #label>
          <div class="form-input-box-input-phone flex middle">
            <img class="form-input-box-input-phone-imgleft" src="@/assets/images/icon/my-account/person-phone.png">
            <div class="form-input-box-input-phone-text">+86</div>
            <img class="form-input-box-input-phone-imgright" src="@/assets/images/icon/my-account/person-six.png">
          </div>
        </template>
        <template v-if="showRightIcon" #button>
          <img class="form-input-box-input-imgbtn" @click="showTimeDialog"
            src="@/assets/images/icon/my-account/pay-time.png" />
        </template>
        <template v-if="showSixRightIcon" #button>
          <img class="form-input-box-input-phone-imgright" @click="showTimeDialog"
            src="@/assets/images/icon/my-account/person-six.png" />
        </template>
      </van-field>
    </div>
    <FormDialog :height="heightPup" :titleRight="titleRight" ref="formTimeDialogRef">
      <template #content>
        <div>
          <div class="form-mb" v-if="showRightIcon">
            <van-date-picker @change="dateChange" :formatter="formatter" :columns-type="columnsType" :show-toolbar="false"
              v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" />
          </div>
          <div class="six-ul form-mb-15" v-if="showSixRightIcon">
            <div v-for="(item, index) in sixList" :key="index">
              <div @click.stop="whetherOrNotToCheck(item)" class="six-li flex middle between">
                <div class="six-li-left">
                  {{ item.title }}
                </div>
                <div v-if="item.status" class="six-li-right">
                  <img src="@/assets/images/icon/my-account/six-success.png">
                </div>
              </div>
              <van-divider v-if="index === 0" />
            </div>

          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <footer-btn @footerBtn="footerBtns" title="确认"></footer-btn>
        </div>
      </template>
    </FormDialog>
  </div>
</template>
  
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { useIndex } from './hooks/useIndex'
const {
  sixList,
  whetherOrNotToCheck,
  getSelectedItemTitle,
  columnsType,
  formatter,
  currentDate,
  minDate,
  maxDate,
  getFormattedDate,
  dateChange } = useIndex()
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  titleRight: {
    type: String,
    default: ''
  },
  valueModel: {
    type: String,
    default: ''
  },
  isPhone: {
    type: Boolean,
    default: false
  },
  showRightIcon: {
    type: Boolean,
    default: false
  },
  showSixRightIcon: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请输入'
  }
});
const emit = defineEmits()
const innerValueModel = ref(props.valueModel)
watch(innerValueModel, (value) => {
  emit('update:modelValue', value);
});



const footerBtns = () => {
  if (props.showRightIcon) {
    innerValueModel.value = getFormattedDate(currentDate.value)
  } else if (props.showSixRightIcon) {
    innerValueModel.value = getSelectedItemTitle(sixList.value)
  }
  formTimeDialogRef.value.closeDialog()
}


const formTimeDialogRef = ref()
const heightPup = ref('')
const showTimeDialog = () => {
  if (props.showRightIcon) {
    heightPup.value = '400px'
  } else if (props.showSixRightIcon) {
    heightPup.value = '276px'
  }
  formTimeDialogRef.value.openDialog()

}
</script>
  
<style scoped lang="scss">
.form-input-box {
  &-title {
    font-size: 7px;
    font-weight: 400;

  }

  &-input {
    margin-top: 6px;

    :deep(.van-field) {
      background: #f6f6f6;
      height: 24px;
      line-height: 14px;
      border-radius: 5px;
    }

    :deep(.van-field__value) {
      /* margin-top: 1px; */
    }

    &-imgbtn {
      height: 8px;
      margin-top: 3px;
    }

    &-phone-imgright {
      height: 3px;
    }

    &-phone {

      /* margin-top: 2px; */
      &-imgleft {
        height: 8px;
        width: 12px;
      }

      &-text {
        font-size: 8px;
        font-weight: 400;
        margin: 0 2px;

      }

    }
  }
}



.six-ul {
  margin-top: 15px;

  .six-li {
    height: 15px;
    margin-bottom: 8px;

    &-left {
      font-size: 9px;
      font-weight: 400;

    }

    &-right {
      height: 12px;

      &>img {
        height: 100%;
      }
    }
  }
}
</style>
  